<template>
    <div class="page-sidebar navbar-collapse collapse">
        <ul class="page-sidebar-menu  page-header-fixed" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px;">
            <!--<li v-for="(item,$index) in items" class="nav-item start f" :class="testStyle(item,$index)">-->
            <router-link v-bind:to="{path:item.url}" v-for="(item,$index) in items" class="nav-item start f" active-class='active' tag="li">
                <a class="nav-link nav-toggle">
                    <i :class="item.imgCss"></i>
                    <span class="title">{{item.text}}</span>
                    <span class="selected"></span>
                    <span class="arrow" v-if="item.children.length>0"></span>
                </a>
                <ul class="sub-menu" v-if="item.children.length>0">
                    <item class="item" :model="model" :index="index" :fist="$index" v-for="(model,index) in item.children"></item>
                </ul>   
            </router-link>
            <!--</li>-->
        </ul>
    </div>
</template>
<script>
    import item from '../components/item.vue';
    var baseUrl = 'http://localhost:5080/api/';
    export default{
        components: {
            item
        },
        data:function(){
            return {
                items: Array[Object],
                oldPath:'',
            }
        },
        mounted:function(){
            this.loadNavBar();
            $('body').on('click', 'li > a.nav-toggle, li > a > span.nav-toggle', function (e) {
                var el = e.currentTarget;
                var ul = $(el).parent().siblings().children('ul').css('display');
                // console.log(ul);
                if(ul=='block'){
                    $(el).parent().siblings().children('ul').css('display','none');
                }
            })
        },
        watch:{
            // '$route'(cur,old){
            //     this.oldPath = old.path;
            // }
        },
        methods:{
            testStyle:function(item,index){
               return {
                   active:(this.$route.path==item.url || item.children.filter(t=> t.url == this.$route.path).length>0)
               }
            },
            loadNavBar:function(){
                // var requestUrl = baseUrl+"BasicPermission/GetPermissionTreeViewDataByRoleId?RoleId=";
                var requestUrl = '../../test.json';
                this.$http.get(requestUrl,{},{
                    headers: {
                        "X-Requested-With": "XMLHttpRequest"
                    },emulateJSON: true
                }).then((response)=>{
                    var data = response.data;
                    var tr =[];
                    // if(data.Code == 'HM200'){
                    //     tr= JSON.parse(data.Data);
                    // }
                    // this.items = tr;
                    this.items = data;
                    console.info('侧边栏数据',data);
                })
            },
            
        }
    }
</script>
<style scoped>
</style>